<template>
    <div>
        <button @click="show = !show">切换</button>
        <transition name="guidian" enter-from-class="fade-enter-from"
        enter-to-class="fade-enter-to"
        leave-to-class="fade-leave-to"
        enter-active-class="fade-enter-active guidian-enter-active"
        leave-active-class="fade-leave-active guidian-leave-active"
        type="animation"
        >
            <div class="box" v-show="show">同时使用 transition 和 animation</div>
        </transition>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(true)
</script>

<style  scoped>
.box {
    width: 200px;
    height: 100px;
    background-color: aquamarine;
}
.fade-enter-from ,.fade-leave-to{opacity: 0;}
.fade-enter-active, .fade-leave-active{
    transition:  opacity 1s;
}
.guidian-enter-active{ 
animation: guidian 0.5s linear;
}
.guidian-leave-active{
animation: guidian 1s linear reverse;
}
@keyframes guidian {
from{transform: translateX(-100%);}
to{transform: translateY(0px);}
0%{transform: scale(0);}
    50%{transform: scale(1.5);}
    100%{transform: scale(1);}

}
</style>